<template>
    <div class="page-invite">
        <!-- 头部内容 -->
        <header>
          <img v-if="false" v-bind:src="headerImg" />
          <span class="h-time">活动时间：2017年12月01日起 - 2018年03月31日</span>
					<div class="h-data-box">
          <div class="h-data" style="border-width:1px;">
            <div class="h-data-peo" @click="toLevelPage('myCustomer')">
              好友数(人)
              <p>{{inviteNum}}</p>
            </div>
            <div class="h-data-ready" @click="toLevelPage('commissionDetail')">
              待发佣金(元)
              <p>{{readyMon}}</p>
            </div>
            <div class="h-data-all" @click="toLevelPage('commissionDetail')">
              累计佣金(元)
              <p>{{totalMon}}</p>
            </div>
          </div>
					</div>
        </header>
        <!-- 侧边 -->
        <div class="btn-fixed-left">
          <div @click="showRules" class="btn-rule">活动规则</div>

          <div @click="goguide" class="btn-help">赚钱攻略</div>
        </div>
        <!-- 列表图片 -->
        <ul>
          <li v-for="item in imgList" v-bind:key="item">
            <img v-bind:src="item" />
          </li>
        </ul>
        <!-- 悬浮按钮 -->
        <div class="btn-box">
          <div @click="share" class="btn btn-share-url">分享邀请</div>
          <div @click="shareCode" class="btn btn-share-img">当面邀请</div>
        </div>
        <!-- 活动规则 -->
        <mt-popup class="rules-box" v-bind:closeOnClickModal="popRulesClick"  v-model="popupRules">
            <h4>活动规则</h4>
            <div class="rules-body">
              1、活动时间：2017年12月01日起 - 2018年3月31号<br />
              2、好友注册之日起180天内，每笔投资收益的16.8%奖励邀请人（180天的有效期或根据平台运营情况延长）；<br />
              3、16.8%奖励仅计算除了新手标外产品的<span>基础利率</span>部分，不包含产品加息及加息券收益部分<br />
              4、奖励发放：<br/><span>投资送礼：</span>20元现金奖励将在投资产品计息后发放到您的账户中<br /><span>每笔返现：</span>每月第一个工作日，以现金红包的方式发放至您的账户中<br/>
              5、好友收益计算公式：收益=投资金额*投资期限*年化利率/365<br />
              6、如有作弊行为，取消一切奖励，本活动在法律允许的范围内最终解释权归优选金融所有。<br />
            </div>
            <div @click="closeRules" class="rules-close"></div>
        </mt-popup>
        <!-- 二维码弹框 -->
        <mt-popup
          class="popup-qrcode"
          v-model="popupVisible"
          position="bottom">
          <div @click="closepopup">
            <div class="p-qrcode-header">
              <p>我正在使用优选金融APP</p>
              <p>平台安全靠谱，快和我一起赚钱吧</p>
            </div>
            <div class="p-qucode-body">
               <img v-bind:src="imgQrCode" />
            </div>
            <div class="popup-qrcode-close"></div>
          </div>
        </mt-popup>
    </div>
</template>

<script>
import { Popup, MessageBox } from "mint-ui";
export default {
  name: "invite_info",
  data() {
    return {
      inviteNum: "-", // 邀请人数
      totalMon: "-", // 累计金额
      readyMon: "-", // 待发金额
      shareQrCode: "", // 邀请二维码
      shareConfig: {
        title: "", // 分享标题
        desc: "", // 分享描述
        icon: "", // 分享图标
        link: "" // 分享链接
      },
      popRulesClick: false,
      isLogin: false,
      popupRules: false,
      GetQrImgFlag: false,
      UserId: "",
      SessionId: "d4f34b3bb7954825a191881aa0544763",
      popupVisible: false,
      headerImg: require("@/public/imgs/invite/img-headers.jpg"),
      imgQrCode: require("@/public/imgs/invite/img-share-qrcode.jpg"),
      imgList: [
        require("@/public/imgs/invite/img-step1.jpg"),
        require("@/public/imgs/invite/img-step2.jpg"),
        require("@/public/imgs/invite/img-step3.jpg")
      ]
    };
  },
  created() {
    this.$watch("popupRules", function(newValue, oldValue) {
      if (newValue) {
        document.addEventListener("touchmove", function(e) {
          // e.preventDefault();
        });
        document.getElementById("app").style.overflow = "hidden";
        document.getElementById("app").style.height = "100vh";
      } else {
        document.addEventListener(
          "touchmove",
          function(e) {
            e.returnValue = true;
          },
          false
        );
        document.getElementById("app").style.overflow = "";
        document.getElementById("app").style.height = "100%";
      }
    });
  },
  mounted() {
    // 为当前页面的body添加class
    $("body").addClass("body-invite");

    // 设置页面标题
    this.Uitis.setTitle("邀请有礼");

    // 获取用户状态信息
    this.GetUserInfo(res => {
      var sid = res.sessionid;
      // var sid = "d4f34b3bb7954825a191881aa0544763";
      this.InitData(sid);
    });
  },
  methods: {
    GetUserInfo(fn) {
      var UserInfo = this.Uitis.getInfo();
      UserInfo.then(res => {
        if (res.uId !== "") {
          this.UserId = res.uId;
          this.SessionId = res.sessionid;
          this.isLogin = true;
          if (fn) fn(res);
        } else {
          this.isLogin = false;
        }
      });
    },
    InitData(sid) {
      // 获取数据
      var self = this;
      // var GetInviteDataUrl = this.Interface.GetInviteData;
      // var req = this.Axios.get(GetInviteDataUrl, {
      //   params: {
      //     sessionid: sid
      //   }
      // });

      // req.then(res=>{

      // });

      this.$http
        .get(this.Interface.GetInviteData, {
          params: {
            sessionid: sid
          }
        })
        .then(res => {
          //alert(JSON.stringify(res.data));
          if (res.data.success) {
            // 赋值
            var result = res.data.data;
            this.inviteNum = result.friendCount;
            this.totalMon = result.totalAmount;
            this.readyMon = result.pendingAmount;
          } else {
            alert(res.data.msg);
          }
          console.log(res.data.data);
        })
        .catch(res => {
          alert("网络异常，请刷新后重试~");
        });
    },
    goguide() {
      // 跳转到攻略页面
      let Url = `${this.Interface.getH5}/inviteGuide.html`;
      this.Uitis.Jump(Url);
    },
    shareCode() {
      if (!this.isLogin) {
        this.Uitis.Login();
        return false;
      } else {
        if (!this.GetQrImgFlag) {
          this.GetUserInfo(res => {
            var sid = res.sessionid;
            var uid = res.uId;

            var url = `${this.Interface.getH5}/newRegist.html?userid=${uid}`;
            // 获取二维码
            this.$http
              .get(this.Interface.GetShareQrCode, {
                params: {
                  sessionid: sid,
                  content: url
                }
              })
              .then(res => {
                if (res.data.success) {
                  var result = res.data.data;
                  this.imgQrCode = "data:image/jpg;base64," + result.data;
                  this.popupVisible = true;
                  this.GetQrImgFlag = true;
                } else {
                  alert(res.data.msg);
                }
              })
              .catch(function(error) {

									this.Toast("网络异常，请刷新后重试~");
                console.log(error);
              });
          });
        } else {
          this.popupVisible = true;
        }
      }
    },
    toLevelPage(url) {
      if (this.UserId != "") {
        let sid = this.SessionId;
        let Url = `${this.Interface.getH5}/${url}.html?sessionid=${sid}`;

        this.Uitis.Jump(Url);
      } else {
        this.Uitis.Login();
      }
    },
    closepopup() {
      this.popupVisible = false;
    },
    share() {
      // 调用客户端的分享功能
      if (!this.isLogin) {
        this.Uitis.Login();
        return false;
      }
      this.Uitis.getInfo().then(res => {
        this.Uitis.Share({
          title: "我的理财首选平台，和我一起赚钱吧",
          desc: "优选金融APP，安全靠谱，收益稳定，至今100%按期兑付，快来赚钱吧！",
          icon: "http://r.imuzhuang.com/static/youxuan/active/icon.png",
          url: `${this.Interface.getH5}/newRegist.html?userid=${res.uId}`
        });
      });
    },
    showRules() {
      this.popupRules = true;
      $("body").addClass("modalShow");
    },
    closeRules() {
      this.popupRules = false;
      $("body").removeClass("modalShow");
    }
  }
};
</script>

<style lang="less">
.page-invite {
  // 上面
  header {
    position: relative;
    background: url("../../public/imgs/invite/img-headers.jpg") center 0
      no-repeat;
    background-size: 100% auto;
    height: 550px;
    width: 100%;
    .h-time {
      position: absolute;
      left: 50%;
      top: 425px;
      transform: translate(-50%, 0);
      color: #a3a9f4;
      font-size: 18px;
      text-align: center;
      width: 100%;
		}
		.h-data-box{
			box-sizing: border-box;
			padding:0 30px;
			width: 100%;
			height: 140px;
			position: absolute;
      top: 485px;
      left: 50%;
      transform: translate(-50%, 0);
		}
    .h-data {
      display: -webkit-box;
      box-sizing: border-box;
      width: 100%;
      height: 140px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin: 0 auto;
      background: #fff;
      & > div {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        position: relative;
        -webkit-box-flex: 1;
        height: 140px;
        text-align: center;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        color: #666;
        p {
          font-size: 40px;
          color: #f2616d;
          margin-top: 20px;
        }
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(0, -50%);
          width: 1px;
          height: 85px;
          content: "";
          background: #e5e5e5;
        }
      }

      .h-data-ready:after {
        display: none;
      }
    }
  }
  // 活动规则
  .rules-box {
    width: 600px;
    border-radius: 10px;
    background: #fff;
    margin-top: -90px;
    box-sizing: border-box;
    padding: 50px 45px;
    h4 {
      font-size: 30px;
      color: #282828;
      font-weight: normal;
      text-align: center;
      margin-bottom: 30px;
    }
    .rules-body {
      font-size: 30px;
      height: 600px;
      line-height: 1.5;
      color: #333;
      text-align: justify;
      overflow: auto;
      span {
        font-weight: bold;
      }
    }
    .rules-close {
      position: absolute;
      left: 50%;
      top: 850px;
      width: 68px;
      height: 68px;
      transform: translate(-50%, 0);
      background: url("../../public/imgs/invite/img-dialog-btn.png") 0 0
        no-repeat;
      background-size: 68px 68px;
    }
  }
  // 底部按钮
  .btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 110px;
    display: -webkit-box;
    background: linear-gradient(#ffa442, #ff4d5c);
    z-index: 1000;
    .btn {
      height: 100%;
      -webkit-box-flex: 1;
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      font-size: 30px;
      color: #fff;
      &.btn-share-url {
        position: relative;
        &:after {
          position: absolute;
          width: 2px;
          height: 70px;
          right: 0;
          top: 50%;
          transform: translate(0, -50%);
          content: "";
          background: #fff;
        }
      }
    }
  }
  // 侧边悬浮按钮
  .btn-fixed-left {
    position: fixed;
    right: 0;
    top: 50%;
    width: 60px;
    height: 314px;
    transform: translate(0, -50%);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    .btn-rule,
    .btn-help {
      width: 100%;
      font-size: 26px;
      color: #fff;
      writing-mode: vertical-lr;
      height: 143px;
      border-radius: 5px 0 0 5px;
      text-align: center;
      padding-left: 15px;
    }
    .btn-rule {
      background: #ffa442;
      margin-bottom: 38px;
    }
    .btn-help {
      background: #ff4d5c;
    }
  }
}

.body-invite {
  &.modalShow {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  // 模态框
  .mint-msgbox-wrapper {
    .mint-msgbox {
      width: 600px;
      top: 42%;
      overflow: visible;
      border-radius: 15px;

      box-sizing: border-box;
      .mint-msgbox-title {
        font-size: 30px;
        color: #000;
        height: 100px;
        line-height: 100px;
        font-weight: normal;
      }
      .mint-msgbox-content {
        border: none;
      }
      .mint-msgbox-message {
        font-size: 30px;
        color: #000;
        text-align: justify;
        box-sizing: border-box;
        padding: 0 20px 30px;
        line-height: 50px;
      }
      .mint-msgbox-btns {
        position: absolute;
        width: 68px;
        height: 68px;
        display: block;
        left: 50%;
        bottom: -130px;
        .mint-msgbox-confirm {
          position: absolute;
          width: 68px;
          height: 68px;
          transform: translate(-50%, 0);
          background: url("../../public/imgs/invite/img-dialog-btn.png") 0 0
            no-repeat;
          background-size: 68px 68px;
          font-size: 0;
        }
      }
    }
  }

  // 分享弹框
  .popup-qrcode {
    position: fixed;
    width: 100%;
    height: 100%;

    .p-qrcode-header {
      width: 750px;
      height: 437px;
      box-sizing: border-box;
      padding: 340px 0 0 0;
      background: url("../../public/imgs/invite/img-invite-h.jpg") 0 0 no-repeat;
      background-size: 750px 437px;
      p {
        font-size: 30px;
        color: #5577fa;
        text-align: center;
        height: 50px;
        line-height: 50px;
      }
    }

    .p-qucode-body {
      width: 750px;
      height: 485px;
      background: url("../../public/imgs/invite/icon-invite-qr-bg.jpg") 0 0
        no-repeat;
      background-size: 750px 485px;
      margin: 50px 0 0 0;

      img {
        display: block;
        width: 100%;
        max-width: 100%;
        border: none;
        width: 252px;
        height: 252px;
        margin: 0 auto;
      }
    }

    .popup-qrcode-close {
      position: relative;
      left: 50%;
      top: 50px;
      transform: translate(-50%, 0);
      width: 60px;
      height: 60px;
      background: #fff url("../../public/imgs/invite/img-share-close.jpg")
        center no-repeat;
      // background: transparent;
      background-size: 30px 30px;
    }
  }
  /* 合伙人背景设置 */
  .v-modal {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.8);
  }
}
</style>
